<template>
  <div class="table-case">
    <table class="my-table">
      <thead>
        <tr>
          <!-- <th>编号</th> -->
          <slot name="id"></slot>
          <!-- <th>名称</th> -->
          <slot name="name"></slot>
          <!-- <th>图片</th> -->
          <slot name="img"></slot>
          <!-- <th width="100px">标签</th> -->
          <slot name="tab"></slot>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(e, i) in goods" :key="e.id">
          <td>{{ i + 1 }}</td>
          <td>{{ e.name }}</td>
          <td>
            <img :src="e.picture" />
          </td>
          <td>
            <MyTag :tag="e.tag" @enterVal="fn" :id="e.id"></MyTag>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import MyTag from "./MyTag.vue";
export default {
  components: {
    MyTag,
  },
  props: {
    goods: {
      type: Array,
      required: true,
    },
  },
  methods: {
    // 回车事件修改值
    fn(val) {
      // console.log(val.id)
      this.goods.find((e) => e.id === val.id).tag = val.val;
    },
  },
};
</script>

<style lang="less" scoped>
.table-case {
  width: 1000px;
  margin: 50px auto;
  img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    vertical-align: middle;
  }

  .my-table {
    width: 100%;
    border-spacing: 0;
    img {
      width: 100px;
      height: 100px;
      object-fit: contain;
      vertical-align: middle;
    }
    th {
      background: #f5f5f5;
      border-bottom: 2px solid #069;
    }
    td {
      border-bottom: 1px dashed #ccc;
    }
    td,
    th {
      text-align: center;
      padding: 10px;
      transition: all 0.5s;
      &.red {
        color: red;
      }
    }
    .none {
      height: 100px;
      line-height: 100px;
      color: #999;
    }
  }
}
</style>